<template>
    <div class="classify">
        <div class="classify-con">
          <div style="width:30%;overflow: scroll;" :style="{height:height}">
            <ul class="classify-list"  ref="wrapper" >
              <li v-for="(item,index) in fenleiList.left" :key="index" @click="qiehuan(index)" :class="{active:index===classifyIndex}">
                {{item.name}}
              </li>
            </ul>
          </div>


            <!--右边内容-->
          <div class="calssify-rigth" :style="{height:height}"  ref="wrapper2" >
            <div v-if="erJiTitle!=''">
              <p style="text-align: left;margin:5px;font-size:14px;">{{erJiTitle}}</p>
              <ul class="calssify-left-ul" style="margin:0;padding:3px;" v-if="right.length">
                <li  v-for="(item,index) in right" :key="index"  >
                  <p v-if="item.children.length>0" style="font-size: 12px;font-weight: bold;color: #606266;position: relative">
                    —— {{item.name}} ——
                  </p>
                  <div v-if="item.children.length>0" style="width:100%;float: left;" >
                    <div v-for="(v,idx) in item.children" :key="idx" style="width:49%;float: left;line-height:50px;position: relative;z-index:999;" @click="goDetails(v.id)">
                      <span  style="color:#f44;font-weight: bold">{{v.name}}</span>
                    </div>
                  </div>
                  <div v-else style="width:49%;float: left;line-height:60px;" @click="goDetails(item.id)">
                    <span  style="color:#f44;font-weight: bold">{{item.name}}</span>
                  </div>

                </li>
              </ul>

              <p v-else style="color:#888;">暂无分类信息</p>
            </div>

            <ul class="calssify-left-ul" style="margin:0;padding:3px;" v-else>
              <li  v-for="(item,index) in right" :key="index" @click="goDetails(item.id)" style="width:49%;border:1px solid;float: left;height:60px;">
                <span>{{item.name}}</span>
              </li>
            </ul>

          </div>

        </div>
    </div>
</template>

<script>
  import { mapState } from 'vuex';
  import axios from 'axios';
    export default {
        name: "classify",
      data(){
          return{
            toastTime:0,//加载遮罩的动画时间
            erJi:[],//二级分类
            erJiTitle:'',
            right:{},
            classifyIndex:0,
            fenleiList:{
                left:[],
                right:[]
            },
            height:0,//分类列表的高度
          }
      },
      computed: {
        ...mapState('shop',{
          details:"data",
          sever:'sever'
        })
      },
      methods:{
        qiehuan(index) {
          var _this = this;
          _this.classifyIndex = index;
          // _this.right = _this.list.right[index];
          if(_this.fenleiList.right[index].length){//如果没有子分类就以本身作为作为子集
            _this.right = _this.fenleiList.right[index];
            // for(var i = 0;i<_this.right.length;i++){
            //
            // }
          }else{
            _this.right = [_this.fenleiList.left[index]];
          }
          // console.log(_this.right)
          _this.erJiTitle = _this.erJi[index];
        },
        test(){
          for(var i =0;i<this.fenleiList.right.length;i++){
            this.erJi.push(this.fenleiList.right[i].name)
          }
        },
        goDetails(id) {
          this.$router.push({name:'shop_goodslist',params:{
                item_id:id
            }
          })
        },
        //获取商品分类信息
        getfenlei(){
          var $this = this;
          this.$http.item.get('category/search',{
            params:{
              status:true
            }
          })
            .then((res)=>{
              // console.log(res.data)
              if(!res.data.code){
                var i=0;
                for(var k in res.data.data){
                  $this.fenleiList.left.push(res.data.data[k])
                  $this.fenleiList.right[i] = res.data.data[k].children;
                  i++;
                }
                this.qiehuan(0);
                // console.log($this.fenleiList.left)
                // console.log($this.fenleiList.right[0])
              }
            }).catch((err)=>{
            console.log(err)
          })
        }
      },
      mounted(){
        this.$toast.loading({
          mask: true,
          message: '加载中...',
          duration: 1000
        });
        this.getfenlei();
        var h = document.documentElement.clientHeight || document.body.clientHeight;
        h-=50;
        this.height=h+'px';
      }
    }
</script>

<style scoped>
  .classify{
    text-align: center;
    height: 100%;
    overflow: hidden;
  }
  .active {
    /*border-left: 2px solid;*/
    background: #FF8855;
    color: #fff!important;
  }

  .classify-con{
    display: flex;
    position: relative;
  }
  .classify-list{
    width:100%;
    height:100%;
    overflow: scroll;
    font-size:14px;
    background: #E6E6E6;
  }
  .classify-list>li{
    width:100%;
    padding:15px 0;
  }

  .calssify-rigth{
    width:70%;
    height:520px;
    overflow: scroll;
    /*background: skyblue;*/
    /* margin-bottom:50px; */
    position: absolute;
    top:0;
    right:0;
  }
  .xian-left{
    margin:0 10%;
    width:80%;
    border-top:1px solid;
    display: inline-block;
    position: absolute;
    top:50%;
    left:0;
    color:#999999;
  }
  .xian-title{
    display: inline-block;
    background: #fff;
    padding:3px 10px;
    margin:0 auto;
    position: relative;
    z-index:999;
  }
</style>
